import { Button, Form, Input, Radio } from "antd"
import React, { useState } from "react"

import { ISubmitFormProps } from "./types"

type LayoutType = Parameters<typeof Form>[0]["layout"]

const SubmitForm: React.FC<ISubmitFormProps> = props => {
	const [formLayout, setFormLayout] = useState<LayoutType>("horizontal")

	const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
		setFormLayout(layout)
	}

	const formItemLayout = formLayout === "horizontal" ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null

	const buttonItemLayout = formLayout === "horizontal" ? { wrapperCol: { span: 14, offset: 4 } } : null

	return (
		<Form
			{...formItemLayout}
			layout={formLayout}
			initialValues={{ layout: formLayout }}
			onValuesChange={onFormLayoutChange}
			{...props}
		>
			{props.children}
			<Form.Item label="Form Layout" name="layout">
				<Radio.Group value={formLayout}>
					<Radio.Button value="horizontal">Horizontal</Radio.Button>
					<Radio.Button value="vertical">Vertical</Radio.Button>
					<Radio.Button value="inline">Inline</Radio.Button>
				</Radio.Group>
			</Form.Item>
			<Form.Item label="Field A">
				<Input placeholder="input placeholder" />
			</Form.Item>
			<Form.Item label="Field B">
				<Input placeholder="input placeholder" />
			</Form.Item>
			<Form.Item {...buttonItemLayout}>
				<Button type="primary">Submit</Button>
			</Form.Item>
		</Form>
	)
}

export default SubmitForm
